<template>
    <div class="myfriends">
        <span class="myfriends-header">最多可添加5位亲朋信息</span>
        <div>
            <div class="myfriends-group" v-for="(item, index) in lists" :key="index" @click="selectItem(item)">
                <div class="myfriends-group-left">
                    <img :src="imgUrl" />
                    <span>{{item.name}}</span>
                </div>
                <img class="delete" :src="deleteUrl" @click.stop="deleteItem(item)"/>
            </div>
        </div>
        <router-link to="/wxemmine/myfriends/addfriends" v-if="this.listNum < 5">
            <div class="myfriends-footer"><img :src="addUrl" /></div>
        </router-link>
    </div>
</template>
<script>
const imgUrl = require('@/assets/img/touxiang/1.png')
const deleteUrl = require('@/assets/img/mine/delete.png')
const addUrl = require('@/assets/img/mine/add.png')
import { MessageBox, Toast } from 'mint-ui'
export default {
    data () {
        return {
            imgUrl: imgUrl,
            deleteUrl: deleteUrl,
            addUrl: addUrl,
            lists: [],
            listNum: 0,
            id: ''
        }
    },
    mounted () {
        this.id = this.LocalStorageUtil.getItem('patientId')
        if (this.id) {
            this.getpatientsRelatives()
        }
    },
    methods: {
        deleteItem (item) {
            MessageBox({
                message: '确定执行删除吗?',
                showCancelButton: true
            }).then(res => {
                if (res == 'confirm') {
                    this.ACApi.deletePatientsRelatives(item.id,{
                        onSuccess: res => {
                            this.getpatientsRelatives()
                            Toast({
                                message: '删除成功',
                                iconClass: 'mintui mintui-success',
                                duration: 1500
                            })
                        },
                        onFail: error => console.log(error)
                    })
                }
            })
        },
        getpatientsRelatives () {
            this.ACApi.getpatientsRelatives({
                id: this.id
            },{
                onSuccess: res => {
                    if (res.data.success) {
                        this.lists = res.data.result
                        this.listNum = res.data.result.length
                    }
                },
                onFail: error => console.log(error)
            })
        },
        selectItem (item) {
            this.$router.push({path: '/wxemmine/myfriends/addfriends', query: item})
        }
    }
}
</script>
<style lang="stylus" scoped>
@import '../../../assets/css/layout'
@import '../../../assets/css/var'
.myfriends {
    $column()
    box-sizing: border-box
    padding 0 .4rem
}
.myfriends-header {
    font-size: $text-font28
    color: $lSilver
    padding .3rem 0 .4rem 0
    letter-spacing: 1px
}
.myfriends-group {
    box-sizing: border-box
    $row()
    $flex-ac()
    $flex-sb()
    width 6.7rem
    height 1.4rem
    background: $White
    box-shadow: 0 0 .15rem $lSilver
    border-radius: .1rem
    margin-bottom: .4rem
    .myfriends-group-left {
        $row()
        $flex-ac()
        padding-left: .2rem
        img {
            width 1rem
            height 1rem
            margin-right: .3rem
        }
    }
    .delete {
        width .8rem
        height .8rem
        margin-right: .2rem
    }
}
.myfriends-footer {
    box-sizing: border-box
    $row()
    $flex-ac()
    $flex-vc()
    width  6.7rem
    height 1.4rem
    background: $eGreen
    border-radius: .1rem
    img {
        width .5rem
        height .5rem
    }
}
</style>
